<template>
  <footer>
    <div class="ft1">
      <h3>大桌蹄子咖啡</h3>
      <ul>
        <li><h4>关于桌子咖啡</h4></li>
        <li>品牌故事</li>
        <li>公司历程</li>
      </ul>
      <ul>
        <li><h4>加盟合作</h4></li>
        <li>加盟服务</li>
        <li>门店展示</li>
      </ul>
      <ul>
        <li><h4>客户服务</h4></li>
        <li>咨询服务</li>
        <li>友情链接</li>
        <li>常见问题</li>
        <li>更多</li>
      </ul>
      <ul>
        <li><h4>找到我们</h4></li>
        <li>地图导航</li>
        <li class="QRcode">
          <i class="fa fa-qq">
            <span class="img">
              <img src="../assets/QRcode.png" alt="" />
            </span>
          </i>
          <i class="fa fa-wechat">
            <span class="img">
              <img src="../assets/QRcode.png" alt="" />
            </span>
          </i>
          <i class="fa fa-weibo">
            <span class="img">
              <img src="../assets/QRcode.png" alt="" />
            </span>
          </i>
        </li>
      </ul>
    </div>
    <div class="ft2">
      <p>Copyright © 2019 桂林电子科技大学-卓严钊. All rights reserved.</p>
    </div>
  </footer>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
footer {
  color: #fff;

  .ft1 {
    position: relative;
    display: grid;
    padding: 0 15px;
    grid-template-rows: 1fr 2fr;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    /* text-align: center; */
    background-color: #161c25;
    h3 {
      font-family: "hanbiao";
      font-size: 26px;
      letter-spacing: 2px;
      padding: 30px 60px 10px;
      margin-bottom: 20px;
      grid-column-start: 1;
      grid-column-end: 5;
      &::after {
        position: absolute;
        left: 50%;
        top: 3em;
        transform: translateX(-50%);
        content: "";
        height: 2px;
        width: calc(100% - 120px);
        background-color: #2b2f34;
      }
    }
    ul {
      li {
        list-style: none;
        margin: 5px 0;
        h4 {
          margin: 15px 0;
        }
      }
      & > li:not(:first-child) {
        color: rgba(239, 239, 239, 0.5);
      }
      &:last-child li {
        &:last-child {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }

  .ft2 {
    background-color: #000;
    text-align: center;
    padding: 10px;
  }
}

/* 二维码 */
footer .QRcode i.fa {
  position: relative;
}
footer .QRcode i.fa span {
  position: absolute;
  display: inline-block;
  background-color: #efefef;
  padding: 10px;
  border-radius: 8px;
  top: 24px;
  display: none;
}
footer .QRcode i.fa:hover span {
  display: block;
}
footer .QRcode i.fa span::before {
  position: absolute;
  content: "";
  display: block;
  border-color: transparent transparent #efefef transparent;
  border-style: solid;
  top: -15px;
  border-width: 0 10px 20px 5px;
}
footer .QRcode i:nth-child(1) .img {
  left: -12px;
}
footer .QRcode i:nth-child(1) .img::before {
  left: 14px;
}
footer .QRcode i:nth-child(2) .img {
  left: -24px;
}
footer .QRcode i:nth-child(2) .img::before {
  left: 24px;
}
footer .QRcode i:nth-child(3) .img {
  left: -36px;
}
footer .QRcode i:nth-child(3) .img::before {
  left: 36px;
}
footer .ft1 .QRcode img {
  width: 100px;
  vertical-align: bottom;
}
</style>